<html>
    <head>
        <meta charset="utf-8">
        <title>地图事件:Click</title>
        <!-- leaflet的css样式 -->
        <link rel="stylesheet" href="../lib/leaflet.css" />
        <!-- leaflet的js库 -->
        <script type="text/javascript" src="../lib/leaflet-src.js"></script>
        <!-- 地图容器样式 -->
        <style>
            #mapDiv{
                width: 100%;
                height: 100%;
            }
        </style>

        <script type="text/javascript">
            var map = null; 

            function init(){

                //1.创建map对象
                map = L.map("mapDiv", { 
                    layers: [
                        L.tileLayer( 'http://{s}.tile.osm.org/{z}/{x}/{y}.png')
                    ],      
                    center: [39,116],
                    zoom: 9
                });

                // //2. 绑定click事件，function(ev)即匿名函数，无需定义函数名
                // map.on('click', function(ev) {
                //     document.getElementById("XY").value = ev.latlng;
                // });

                // map.off('click');



            }

            //绑定click事件
            function onClick(){
                map.on('click', function(ev) {
                    document.getElementById("XY").value = ev.latlng;
                });
            }

            //解除click事件绑定
            function onOffClick(){
                map.off('click');
            }

        </script>
            
    </head>
    <body onload="init()">
        <span><input type="button" value="绑定事件" onclick="onClick()"></span>
        <span><input type="button" value="解除绑定" onclick="onOffClick()"></span>
        <span>鼠标点击坐标：</span>

        <input id="XY" type="text" value="0.0" size='40'></span>
        <!--地图的容器-->
        <div id="mapDiv"></div>
    </body>
</html>



